<template>
	<view class="content">
		<view class="header">
			<view class="header_bg">

				<view class="search">
					<text>特色课包名称</text>
					<input type="text" value="" placeholder="请输入" />
				</view>


				<view class="add">
					<text>选择特色课</text>
				</view>

			</view>


		</view>
		<view class="class" v-for="(item,index) in list">
			<view class="class_left">
				<image src="../../../static/my/shoplogo.png" mode=""></image>
			</view>
			<view class="class_right">
				<view class="class_right_top">
					<text>{{item.title}}</text>
					<image src="../../../static/school/zs1.png" mode="" @click="up(item)"></image>
				</view>
				<view class="update" v-show="item.status">
					<view class="c1">
						<view class="c1_up">
							<text>修改</text>
						</view>
						<view class="c1_de">
							<text>删除</text>
						</view>
						<view class="c2">
						</view>
					</view>
				</view>
				<view class="tape">
					<text>{{item.type}}</text>
				</view>
				<view class="ryprice">
					<view class="rypriceleft">
						<text>入园价格：￥</text>
					</view>
					<view class="rypriceright">
						<text>{{item.ryprice}}</text>
					</view>
				</view>

				<view class="price">
					<view class="price_left">
						<text>零售价格：￥</text>
					</view>
					<view class="price_right">
						<text>{{item.lsprice}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 0,
						status: false,
						title: '潜意识投射测试',
						type: '属性',
						ryprice: '112',
						lsprice: 111,
					},
					{
						id: 1,
						status: false,
						title: '潜意识投射测试',
						type: '属性',
						ryprice: '112',
						lsprice: 111
					}
				]
			}
		},
		methods: {
			up(item) {
				item.status=!item.status
				console.log(item.status)
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;
		height: 1624rpx;
		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		width: 750rpx;
		height: 280rpx;
		background: linear-gradient(180deg, #1789FF 0%, #93C3F9 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header_bg {
		padding-top: 28rpx;
	}

	.search {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.search text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;

	}

	.search input {
		width: 450rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding-left: 24rpx;
		margin-left: 24rpx;
	}

	.search input::placeholder {}

	.add {
		width: 686rpx;
		height: 88rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 3rpx solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx auto 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.class {
		width: 690rpx;
		height: 288rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 20rpx 0rpx rgba(158, 158, 158, 0.04);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 0;
		display: flex;
		align-items: center;
	}

	.class_left {
		margin-left: 28rpx;
	}

	.class_left image {
		width: 216rpx;
		height: 216rpx;
	}

	.class_right {
		width: 100%;
		height: 216rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.class_right_top {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.class_right_top image {
		width: 70rpx;
		height: 40rpx;
		margin-left: auto;

	}

	.update {
		width: 170rpx;
		height: 104rpx;
		background-color: #FFFFFF;
		margin-left: auto;
		z-index: auto;
		position: absolute;
		right: 32rpx;
		margin-top: 20rpx;


	}

	.c1 {
		position: relative;
		width: 170rpx;
		height: 104rpx;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		align-items: center;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(150, 150, 150, 0.2);
		border-radius: 2rpx 2rpx 2rpx 2rpx;
	}

	/* 实现小三角 */
	.c2 {
		/* 绝对定位 */
		position: absolute;
		/* 此处的“20”为了实现移动到小三角的盒子以外的位置调整的 */
		top: -20px;
		/* 为了实现居中 */
		right: 40rpx;
		margin-right: -10px;
		/* 实现小三角 */
		width: 0;
		height: 0;
		/* 将四个边的框都隐藏显示 */
		border: 10px solid transparent;
		/* 指定要显示的边的颜色 */
		border-bottom-color: #FFFFFF;
	}

	.c1_up {
		display: flex;
		justify-content: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 8rpx;
		border-bottom: 2rpx solid #F0F0F0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
	}

	.c1_de {
		display: flex;
		justify-content: center;
		margin-top: 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FF5858;
	}

	.tape {
		width: 96rpx;
		height: 48rpx;
		background: #3392F6;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8rpx;
	}

	.ryprice {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.rypriceleft {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}

	.rypriceright {
		font-family: PingFang SC-Bold;
		font-weight: Bold;
		font-size: 32rpx;
		color: #666666;
	}

	.price {
		width: 242rpx;
		height: 48rpx;
		background: #404040;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
	}

	.price_left {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.price_right {
		font-family: PingFang SC-Bold;
		font-weight: Bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>